上一篇介紹 DataTable 常見的操作，此篇會繼續介紹 DataTable 實用功能：

Pagination

當資料較多時會需要分頁切換，加上 paginator 屬性，搭配：

1. rows 設定每頁要顯示的數量。
2. rowsPerPageOptions 可調整每頁顯示的數量。

<DataTable
  :value="products"
  removableSort
  tableStyle="min-width: 50rem"
  paginator
  :rows="5" // 每頁顯示數量
  :rowsPerPageOptions="[5, 10, 20, 50]" // 調整每頁顯示數量
>
  <Column header="代碼" field="code" sortable></Column>
  <Column header="名稱" field="name" sortable></Column>
  <Column header="種類" field="category" sortable></Column>
  <Column header="數量" field="quantity" sortable>
    <template #body="slotProps"> {{ slotProps.data.quantity }} 件 </template>
  </Column>
</DataTable>

若需要其他分頁元素，DataTable 提供其他屬性 paginatorTemplate、currentPageReportTemplate。

其中，paginatorTemplate 提供以下[參數]顯示(https://primevue.org/paginator/#template)：

1. FirstPageLink：回到第一頁
2. PrevPageLink：前一頁
3. PageLinks：各頁列表
4. NextPageLink：後一頁
5. LastPageLink：到最後一頁
6. RowsPerPageDropdown：每頁顯示數量調整的下拉選單
7. JumpToPageDropdown：頁數下拉選單，選擇後跳至該頁
8. JumpToPageInput：手動輸入頁碼跳至該頁
9. CurrentPageReport：顯示分頁資訊

有設定 CurrentPageReport，再搭配 currentPageReportTemplate 設定 第 {first} 筆到第 {last} 筆，共 {totalRecords} 筆

<DataTable
  :value="products"
  removableSort
  tableStyle="min-width: 50rem"
  paginator
  :rows="5"
  :rowsPerPageOptions="[5, 10, 20, 50]"
  paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput"
  currentPageReportTemplate="第 {first} 筆到第 {last} 筆，共 {totalRecords} 筆"
>
  <Column header="代碼" field="code" sortable></Column>
  <Column header="名稱" field="name" sortable></Column>
  <Column header="種類" field="category" sortable></Column>
  <Column header="數量" field="quantity" sortable>
    <template #body="slotProps"> {{ slotProps.data.quantity }} 件 </template>
  </Column>
</DataTable>

Row Selection

選擇特定 row 資料，通常使用 checkbox 或 radio button 進行選擇，使用方法如下。

RadioButton

為單一選擇 row 的方法，主要是在 <DataTable> 加上 datakey 代表該資料唯一識別值，並 v-model:selection 綁上被選取的資料。

另在 設定 selectionMode 為 single，表示僅能選取單一筆資料。

// script
const selectedProduct = ref()
const products = ref([
  {
    code: '001',
    name: 'Watch',
    category: 'Accessories',
    quantity: 20
  },...
])

// template
<DataTable
    v-model:selection="selectedProduct"
    :value="products"
    dataKey="code"
    tableStyle="min-width: 50rem"
>
    <Column selectionMode="single" headerStyle="width: 3rem"></Column>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>

Checkbox

多選 row 的方法，可搭配全選的 checkbox 一次全部選取。
同樣也須在 <DataTable> 加上 datakey 代表該資料唯一識別值，並 v-model:selection 綁上被選取的資料。

另在 <Column> 設定 selectionMode 為 multiple，表示可選取多筆資料。

// script
const selectedMultiProduct = ref()
const products = ref([...])

// template
<DataTable
    v-model:selection="selectedMultiProduct"
    :value="products"
    dataKey="code"
    tableStyle="min-width: 50rem"
  >
    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
    <Column field="code" header="代碼"></Column>
    <Column field="name" header="名稱"></Column>
    <Column field="category" header="種類"></Column>
    <Column field="quantity" header="數量"></Column>
</DataTable>

event

此範例為當被選取的欄位會觸發 rowSelect 方法，且在不被選取時再觸發 rowUnselect 方法。

此時兩種方法中帶有 event 參數，其內容包含被選取的資訊。

// script
const onRowSelect = (event) => {
  toast.add({
    severity: 'info',
    summary: 'Product Selected',
    detail: 'Name: ' + event.data.name,
    life: 5000
  })
}
const onRowUnselect = (event) => {
  toast.add({
    severity: 'warn',
    summary: 'Product Unselected',
    detail: 'Name: ' + event.data.name,
    life: 5000
  })
}
// template
<DataTable
    v-model:selection="selectedProduct"
    :value="products"
    selectionMode="single"
    dataKey="code"
    :metaKeySelection="false"
    @rowSelect="onRowSelect"
    @rowUnselect="onRowUnselect"
    tableStyle="min-width: 50rem"
>...</DataTable>

@rowSelect

@rowUnselect

event 內容：

@row-click

補充一下，如果僅為點擊 row，可改採用 @row-click 方法，也包含 event 參數取得被點擊的資訊。

p.s. DataTable 也提供 @row-dblclick 雙擊事件。

// script
const onRowClick = (event) => {
  toast.add({
    severity: 'info',
    summary: 'Product clicked',
    detail: 'Name: ' + event.data.name,
    life: 5000
  })
}
// template
<div class="mb-6">
  <DataTable
    :value="products"
    tableStyle="min-width: 50rem"
    @row-click="onRowClick">...</DataTable>
</div>

這樣的結果一樣可以取得被觸發的 row 資訊，只是 @row-click 為點擊事件，不像前述的 @rowSelect 是要選取 row 資訊(並記錄到 v-model 的變數中)。

參考連結

1. https://primevue.org/datatable/
2. https://primevue.org/paginator/